<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/activity.css"/>
	</head>
	<body>
		<div class="header">
			<div class="header-content">
				<ul class="header-nav">
					<li class="homepage"><a href="index.html" target="_blank">主站</a></li>
					<li><a href="live.html" target="_blank">直播间</a></li>
					<li><a href="act.html" target="_blank" style="color: #db6969;">活动</a></li>
					<li><a href="app_fm.html" target="_blank">手机客户端</a></li>
				</ul>
				<input type="text" name="" id="sea_input" placeholder="搜索" />
				<ul class="header-opts">
					<li><a href="">注册/登录</a></li>
					<li class="upload"><a href="">投稿</a></li>
				</ul>
			</div>
		</div>
		<div class="main">
			<ul id="act_ul">
				<!-- <li>
					<img src="img/act01.jpg" >
					<div class="img_details">
						<span class="act_now">活 动</span>
						<span class="act_title">七夕·再遇神明</span>
						<span class="act_progress">进行中</span>
					</div>
				</li>-->
			</ul>
		</div>
		<div class="act_w" style="width: 100%;height: 80px; position:fixed;bottom:0px;display: none;">
			<img src="img/act_more.gif" width="70px" height="70px" style="margin-left: 50%;">
		</div>
		<script src="js/nav-head.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var a=setTimeout(function(){
					$('.act_w').hide()
				},2000)
			var obj=$.ajax({
				type:"get",
				url:"act_list.json",
				async:false,
				// beforeSend:function(){
				//   $('.act_w').show(); //显示加载时候的提示
				//   console.log(123)
				//   clearTimeout(a);
				// },
				success:function(response,status,xhr){
					console.log(123)
				}
			})
			
			function Prod(obj){
				this.src=obj.src;
				this.title=obj.title;
				this.act_tm=obj.act_tm;
				this.act_result=obj.act_result;
			}
			Prod.prototype={
				init:function(){
					$("<li></li>").html('<img src="'+this.src+'" alt="" /><div class="img_details"><span class="act_now">'+this.act_tm+'</span>'+
						'<span class="act_title">'+this.title+'</span>'+
						'<span class="act_progress">'+this.act_result+'</span></div>').appendTo($("#act_ul"));
				}
			}
			$.each(obj.responseJSON.list,function(i,e){
				var pro=new Prod(e);
				pro.init();
			})
			$(window).scroll(function () {
			    var scrollTop = $(this).scrollTop();
			    var scrollHeight = $(document).height();
			    var windowHeight = $(this).height();
			    if (scrollTop + windowHeight + 10 >= scrollHeight) {
					$('.act_w').show();	
					console.log($(this).scrollTop());
					var t = $(this).scrollTop();
					$('body,html').animate({'scrollTop':t+200},100);
					// $('<li style="border: none;"></li>').html('<img src="img/act_more.gif" alt=""  style="width: 70px; height: 70px;margin-left:50%; "/>').appendTo($("#act_ul")).delay(500).hide(0);
					a=setTimeout(function(){
						$.each(obj.responseJSON.list2,function(i,e){
							var pro=new Prod(e);
							pro.init();
						})
						$('.act_w').hide()
					},1000)
					
					
			    }
			});
		</script>
	</body>
</html>
